import { createApp, h } from 'vue';
import ConfirmModal from '../components/ConfirmModal.vue';

export function useConfirm() {
    const openConfirm = (options = {}) => {
        return new Promise(resolve => {
            const container = document.createElement('div');
            document.body.appendChild(container);

            // ✅ 挂载 setup 组件时要加上 app.component，否则 setup 组件不会被正确识别
            const app = createApp({
                render() {
                    return h(
                        ConfirmModal,
                        {
                            ...options,
                            onResolve: confirmed => {
                                resolve(confirmed);
                                app.unmount();
                                document.body.removeChild(container);
                            }
                        },
                        {
                            default: typeof options.content === 'function' ? options.content : undefined
                        }
                    );
                }
            });

            // 👇这一步是关键（让 app 识别 setup 的组件）
            app.component('ConfirmModal', ConfirmModal);

            app.mount(container);
        });
    };

    return { openConfirm };
}

/* 
✅ 示例 1：最基础用法
const confirmed = await useConfirm({
  title: '删除记录',
  content: '你确定要删除这条记录吗？'
});
if (confirmed) {
  // 确认逻辑
}

✅ 示例 2：自定义按钮文字
await useConfirm({
  title: '退出登录',
  content: '你真的要退出吗？',
  confirmText: '退出',
  cancelText: '继续使用'
});

✅ 示例 3：带图标
await useConfirm({
  title: '危险操作',
  icon: 'bi bi-exclamation-triangle-fill',
  content: '你将永久删除所有数据，请谨慎！'
});

✅ 示例 4：高亮红色确认按钮
await useConfirm({
  title: '清空账单',
  confirmDanger: true,
  content: '操作无法撤销，是否继续？'
});

✅ 示例 5：VNode 渲染内容（如带多个段落）
const confirmed = await useConfirm({
  title: '删除账单',
  icon: 'bi bi-trash-fill',
  confirmText: '删除',
  cancelText: '取消',
  confirmDanger: true,
  content: () => h('div', [
    h('p', '删除后将无法恢复。'),
    h('p', { class: 'text-danger small mt-2' }, '请谨慎操作！')
  ])
});

✅ 示例 6：按钮中调用
<button @click="onClickDelete">删除</button>

const onClickDelete = async () => {
  const confirmed = await useConfirm({
    title: '确认删除？',
    content: '你真的要删除这个项目吗？',
    icon: 'bi bi-trash3',
    confirmText: '确认删除',
    confirmDanger: true
  });

  if (confirmed) {
    await deleteItem();
    showToast('删除成功');
  }
}
*/
